<template>
  <div class="sidebar">
    <div
      @click="action(index, item)"
      v-for="(item, index) in items"
      :key="item[itemKey]"
    >
      <SidebarItem
        :title="item.title"
        :placement="placement"
        :color="color(index)"
      >
        <div slot="icon" style="font-size: 22px">
          <el-badge is-dot :hidden="hidden(item)">
            <i :class="item.icon" />
          </el-badge>
        </div>
      </SidebarItem>
    </div>
  </div>
</template>

<script>
import SidebarItem from "@/components/SidebarItem";
export default {
  name: "Sidebar",
  data() {
    return {
      index: 0,
    };
  },
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
    itemKey: {
      type: String,
      default: "id",
    },
    placement: {
      type: String,
      default: "left",
    },
    defaultColor: {
      type: String,
      default: "#909399",
    },
    actionColor: {
      type: String,
      default: "rgb(103, 194, 58)",
    },
  },
  computed: {
    color() {
      return (index) => {
        if (index === this.index) {
          return this.actionColor;
        }
        return this.defaultColor;
      };
    },
    hidden() {
      return (item) => {
        if (!item.badge) {
          return true;
        }
        return this.$store.getters.countUnreadMessage <= 0;
      };
    },
  },
  methods: {
    action(index, item) {
      this.index = index;
      if (item.to) {
        this.$router.push({ name: item.to });
      }
    },
    selectIndex(index) {
      if (this.index != index) {
        this.index = index;
      }
    },
  },
  components: {
    SidebarItem,
  },
};
</script>

<style lang="less" scoped>
.sidebar {
  margin: 15px 0;
}
</style>